<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>window</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    
    <style>
     
    /* 头部样式 */
    .topbar {background: #f2f2f2; height:50px; border-bottom: 1px solid #DDDFE3;position: relative;}
    .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
    .hr01, .hr02 {height: 28px;}
    .headerico {padding: 11px 15px 11px 15px;}
    .headericohover {background: #DADDE0;}
    .fr{float: right;}
    .fl{float: left;}
    img {vertical-align: top;}

     /*第一头部*/
    .egret-header-box {height: 50px;}
    .egret-img img {height: 30px;padding: 10px;}
    .egret-header-search {background-color: #fff; position: absolute; left: 60px; right: 20px; height: 34px; margin-top: 8px;border-radius: 4px;}
    .egret-header-search img {margin-left: 30px; height: 20px; margin-top: 7px;}
    .egret-header-search input {line-height: 24px;font-size: 14px;padding-top: 5px;}
    .egret-header-search input:focus {/*border:0;*/ outline:none;}

     /* 第二头部 */
    .egret-header-text {line-height: 50px;color: #fff;font-size: 16px;padding: 0 10px;}
    .egret-header-title {position: absolute;width: 100%;text-align: center;line-height: 50px;color: #fff;font-size: 20px;}


    /* 第三头部 */
    .egret-switchframe {position: absolute; left: 90px; right: 90px;background-color: #fcfcfc;text-align: center;height: 30px;line-height: 30px;bottom: 10px;border-radius: 4px;color: #fff;border: 1px solid #6ab494;}
    .egret-switchframe div {width: 50%;display: inline-block;color: #323237;background-color: #f2f2f2;}
    .egret-switchframe div:first-child {border-radius: 3px 0 0 3px;}
    .egret-switchframe div:last-child {border-radius: 0px 3px 3px 0px;}
    .egret-switchframe-selectswitch {background-color: #6ab494 !important;color: #fff !important;}

     /* 头部切换样式 */
     .activebar {display: block;}
     
     /* 底部切换按钮样式 */
     ul {display: -webkit-box; display: -webkit-flex; display: flex; }
     #footer {height: 51px;background-color: #413A36;border-top: 1px solid #332E2A; }
     #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1;}

     /* 选项卡样式 */
     .scrollbar {display: -webkit-box;display: -webkit-flex; display: flex;text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
     .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
     .indexbar {position: absolute;width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
     .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}
     #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}


.navbar {display: -webkit-box; display: -webkit-flex;display: flex;-webkit-box-orient: horizontal; position: relative; height: 40px; box-sizing: border-box; background: rgba(255,255,255,0.4); border-bottom: 1px solid #e0e0e0; }
    .navbar-item {display: block; -webkit-box-flex: 1; -webkit-flex: 1;flex: 1;width: 100%; line-height: 40px;  font-size: 16px; text-align: center;color: #000; }
    .navbar-item-hov {background-color: rgba(254,242,228,0.7); }
    .navbar-item-active {color: #6ab494; }
    #navmark {position: absolute; left: 0px; bottom: 0px; -webkit-transition: 300ms; text-align: center; height: 2px;background-color: #6ab494;}
    </style>
</head>
<body>
    <div id="wrap">
        <!-- 第三头部 -->
        <div id="thridHeader" class="titlebar">
            <div class="egret-header topbar">
                <div class="egret-switchframe">
                    <div class="egret-switchframe-leftbtn egret-switchframe-selectswitch" tapmode onclick="setSecondFramegroupIndex(0)">已下载</div><div class="egret-switchframe-rightbtn" onclick="setSecondFramegroupIndex(1)" tapmode>下载中</div>
                </div>
                <div class="egret-img"><img src="../image/cm2_icn_back.png" alt="" tapmode onclick="" ></div>
            </div>
        </div>
        <nav class="navbar" id="firstHeaderIndex">
            <a id="navbar-item-recommend" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(0);">歌曲</a>
            <a id="navbar-item-rank" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(1);">歌手</a>
            <a id="navbar-item-favorite" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(2);">专辑</a>
            <mark id="navmark"></mark>
        </nav>


      <div id="main">
        
      </div>
      

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

var thirdHeader = $api.byId('thridHeader');
var firstHeaderOffset;
var firstHeaderIndexHeight;
var main = $api.byId('main');
var mainPos = $api.offset(main);
var isSecopen ;
var isFirstopen;

function setFrameGroupIndex(frameIndex) {
    api.setFrameGroupIndex({
        name: 'downloadmusicgroup',
        index: frameIndex,
        scroll: true
    });
}

function setFrameGroupStatus(frameIndex) {

    switch (frameIndex) {
        case 0:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item navbar-item-active";
                $api.byId('navbar-item-rank').className      = "navbar-item";
                $api.byId('navbar-item-favorite').className  = "navbar-item";
                
                var num = (api.winWidth / 3) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");

                break;
            }
        case 1:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className      = "navbar-item navbar-item-active";
                $api.byId('navbar-item-favorite').className  = "navbar-item";
                
                var num = (api.winWidth / 3) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
        case 2:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className      = "navbar-item";
                $api.byId('navbar-item-favorite').className  = "navbar-item navbar-item-active";
                
                var num = (api.winWidth / 3) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
        default:
            break;
    }
}

// 打开第一个framegroup
function openFirstFramegroup() {
    api.openFrameGroup({
        name: 'downloadmusicgroup',
        background: '#FFF',
        scrollEnabled: false,
        rect: {
            x: 0,
            y: firstHeaderOffset.h + firstHeaderIndexHeight,
            w: "auto",
            h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight 
        },
        index: 0,
        frames: [{
            name: 'apicloudFrame1',
            url: 'apicloudFrame1.html',
            bounces: false,
        }, {
            name: 'apicloudFrame1',
            url: 'apicloudFrame1.html',
            bounces: false,
        }, {
            name: 'apicloudFrame1',
            url: 'apicloudFrame1.html',
            bounces: false,
        }]
    }, function(ret) {
        setFrameGroupStatus(ret.index);
    });
}

function offsetSecFrame () {
    api.setFrameAttr({
        name: 'apicloudFrame1',
        rect: {
                x: 0,
                y: firstHeaderOffset.h + firstHeaderIndexHeight,
                w: 'auto',
                h: 'auto'
            }
    });
}

function backSecFrame () {
    api.setFrameAttr({
        name: 'apicloudFrame1',
        rect: {
            x: 0,
            y: firstHeaderOffset.h,
            w: 'auto',
            h: 'auto'
        }
    });
}

function setFrameGroupAttribute (framename, ishidden) {
    api.setFrameGroupAttr({
        name: framename,
        hidden: ishidden
    });
}

function setFrameAttribute (framename, ishidden) {
    api.setFrameAttr({
        name: framename,
        hidden: ishidden
    });
}

function openSecFrame () {
    api.openFrame({
            name: 'apicloudFrame1',
            url: 'apicloudFrame1.html',
            bounces: false,
            opaque: false,
            rect: {
                x: 0,
                y: firstHeaderOffset.h,
                w: 'auto',
                h: 'auto'
            }
        
        });
}
// -----------------------------------
// 第二个framegroup
// -----------------------------------
function setSecondFramegroupIndex(frameIndex) {
    if ((isSecopen == false) && (frameIndex == 1))
    {
        openSecFrame();
        isSecopen = true;
    }

    if ((isFirstopen == false) && (frameIndex == 0))
    {
        openFirstFramegroup();
        isFirstopen = true;
    }

    if (frameIndex === 0) {
        var thridHeader = $api.byId('thridHeader');
        var thridHeader = $api.offset(thridHeader);

        // 清除右部class
        var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
        var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

        // 注意，类名的前面有一个空格
        rightbtn.className = 'egret-switchframe-rightbtn';
        leftbtn.className  = 'egret-switchframe-leftbtn egret-switchframe-selectswitch';
        offsetSecFrame();
        setFrameAttribute('apicloudFrame1', true);
        setFrameGroupAttribute('downloadmusicgroup', false);
    }
    else {
        var thridHeader = $api.byId('thridHeader');
        var thridHeader = $api.offset(thridHeader);

        // 清除左部class
        var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
        var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

        rightbtn.className = 'egret-switchframe-rightbtn egret-switchframe-selectswitch';
        leftbtn.className  = 'egret-switchframe-leftbtn';        
        setFrameAttribute('apicloudFrame1', false);
        setFrameGroupAttribute('downloadmusicgroup', true);
        backSecFrame();
    }

}


// 完成首页初始化
apiready = function() {
    
    thirdHeader = $api.byId('thridHeader');
    
    var fortheader = $api.byId('fortheader');
    var firstHeaderIndex = $api.byId('firstHeaderIndex');

    $api.fixIos7Bar(thirdHeader);

    // TODO 一定记得修改
    firstHeaderOffset = $api.offset(thirdHeader);
    firstHeaderIndexHeight = $api.offset(firstHeaderIndex).h;
    var main = $api.byId('main');
    var mainPos = $api.offset(main);

    var scrollHeight = $api.dom('.navbar').offsetHeight;
    $api.byId('navmark').style.width = api.winWidth / 3 + 'px';

    var index = 0;
    isFirstopen = false;
    isSecopen = false;
    setSecondFramegroupIndex(index);
};
</script>
</html>